// container/Detail/index.jsx
import React, { useEffect, useState,useRef  } from 'react';
import PopupAddBill from '@/components/PopupAddBill';
import { useLocation ,useNavigate} from 'react-router-dom';
import qs from 'query-string';
import dayjs from 'dayjs';
import cx from 'classnames';
import CustomIcon from '@/components/CustomIcon';
import Header from '@/components/Header';
import { get,typeMap ,post} from '@/utils';
import { Modal, Toast } from 'zarm';

import s from './style.module.less';

const Detail = () => {
  const editRef = useRef();
  const navigateTo = useNavigate();
  const location = useLocation(); // 获取 locaton 实例，我们可以通过打印查看内部都有些什么内容。
  const { id } = qs.parse(location.search);
// 我们通过列表页传入的浏览器查询字符串，通俗的将就是浏览器地址栏上的参数，来获取该笔账单的详情，
  const [detail, setDetail] = useState({});
console.log(detail,'detail');

  useEffect(() => {
    getDetail();
    return () => {}
  }, []);

  const getDetail = async () => {
    const { data } = await get(`/api/bill/detail?id=${id}`);
    //  "data": {"id": 1161,"pay_type": 1, "amount": "55.00","date": "1723031038000", "type_id": 1,"type_name": "餐饮","user_id": 548,"remark": "奶茶和饭"}
    setDetail(data);
  }

  // 删除方法
  // 利用 Zarm 组件提供的 Modal 组件，该组件提供了调用方法的形式唤起弹窗，我们利用这个属性 为「删除」加一个二次确认的形式，避免误触按钮。
const deleteDetail = () => {
  Modal.confirm({
    title: '删除',
    content: '确认删除账单？',
    onOk: async () => {
      const { data } = await post('/api/bill/delete', { id })
      Toast.show('删除成功')
      navigateTo(-1)
    },
  });
}
  return <div className={s.detail}>
  <Header title='账单详情' />
  <div className={s.card}>
    <div className={s.type}>
      {/* 通过 pay_type 属性，判断是收入或指出，给出不同的颜色*/}
      <span className={cx({ [s.expense]: detail.pay_type == 1, [s.income]: detail.pay_type == 2 })}>
        {/* typeMap 是我们事先约定好的 icon 列表 */}
        <CustomIcon className={s.iconfont} type={detail.type_id ? typeMap[detail.type_id].icon : 1} />
      </span>
      <span>{ detail.type_name || '' }</span>
    </div>
    {
      detail.pay_type == 1
        ? <div className={cx(s.amount, s.expense)}>-{ detail.amount }</div>
        : <div className={cx(s.amount, s.incom)}>+{ detail.amount }</div>
        
    }
    {
      console.log(detail.amount,'--detail.amount')
      // 疑问：编辑之后上面的内容怎么也会改变
    }
    <div className={s.info}>
      <div className={s.time}>
        <span>记录时间</span>
        <span>{dayjs(Number(detail.date)).format('YYYY-MM-DD HH:mm')}</span>
      </div>
      <div className={s.remark}>
        <span>备注</span>
        <span>{ detail.remark || '-' }</span>
      </div>
    </div>
    <div className={s.operation}>
      <span onClick={deleteDetail}><CustomIcon type='shanchu' />删除</span>
      <span onClick={() => editRef.current && editRef.current.show()}><CustomIcon type='tianjia' />编辑</span>
    </div>
  </div>
  <PopupAddBill ref={editRef} detail={detail} onReload={getDetail} />
</div>

}

export default Detail
